<template>
  <div class="image-message">
    <el-image
      :src="message.imageUrl"
      :preview-src-list="[message.imageUrl]"
      :style="imageStyle"
      :onerror="defaultImage"
      fit="cover"
    ></el-image>
  </div>
</template>

<script>
export default {
  name: 'ImageMessage',
  props: {
    message: {
      type: Object,
      required: true
    },
    defaultImage: {
      type: String,
      default: ''
    }
  },
  computed: {
    imageStyle() {
      return {
        width: this.message.isMyselfMsg ? '160px' : '120px',
        height: 'auto',
        borderRadius: '4px',
        cursor: 'pointer'
      };
    }
  }
}
</script>

<style scoped>
.image-message {
  display: inline-block;
}
</style>